<template>
    <div class="wrap">
        <section class="shopcar">
            <div class="shopcar-checkbox">
            </div>
            <figure><img src="../../assets/images/shopcar-ph01.png"></figure>
            <dl>
                <dt>超级大品牌服装，现在买只要998</dt>
                <dd>颜色：经典绮丽款</dd>
                <dd>尺寸：L</dd>
                <div class="add">
                    <span>-</span>
                    <input type="text" value="3">
                    <span>+</span>
                </div>
                <h3>￥653.00</h3>
                <small><img src="../../assets/images/shopcar-icon01.png"></small>
            </dl>
        </section>
        <section class="shopcar">
            <div class="shopcar-checkbox">
            </div>
            <figure><img src="../../assets/images/shopcar-ph01.png"></figure>
            <dl>
                <dt>超级大品牌服装，现在买只要998</dt>
                <dd>颜色：经典绮丽款</dd>
                <dd>尺寸：L</dd>
                <div class="add">
                    <span>-</span>
                    <input type="text" value="3">
                    <span>+</span>
                </div>
                <h3>￥653.00</h3>
                <small><img src="../../assets/images/shopcar-icon01.png"></small>
            </dl>
        </section>
        <section class="shopcar">
            <div class="shopcar-checkbox">
            </div>
            <figure><img src="../../assets/images/shopcar-ph01.png"></figure>
            <dl>
                <dt>超级大品牌服装，现在买只要998</dt>
                <dd>颜色：经典绮丽款</dd>
                <dd>尺寸：L</dd>
                <div class="add">
                    <span>-</span>
                    <input type="text" value="3">
                    <span>+</span>
                </div>
                <h3>￥653.00</h3>
                <small><img src="../../assets/images/shopcar-icon01.png"></small>
            </dl>
        </section>
        <van-submit-bar
                :price="3050"
                button-text="去结算"
                @submit="onSubmit"
                class="sub-bar"
        />
    </div>
</template>
<script>
	export default {
		created: function () {
			this.$emit('header', 0)
			this.$emit('footer', 0)
			this.$emit('active', 'category')
		},
		methods: {
			toDetail: function (id) {
				this.$router.push('detail/'+id);
			}
		}
	}
</script>
<style scoped>
    .wrap {
        padding: 2.4rem 0 0rem;
    }
    .shopcar{ width: 100%; margin: 2% 0; padding: 3% 0 2%; box-shadow: 0 2px 2px #d7d7d7; background-color: #fff;overflow: hidden;}

    .shopcar .shopcar-checkbox{position: relative; float: left; width:3%; height: 3em; padding: 10% 0;}
    .shopcar input[type="checkbox"]{ position: absolute; top: 0; left: 0; opacity: 0; }
    .shopcar .shopcar-checkbox label{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../assets/images/check.png) no-repeat; background-size: 60%; background-position: 50% ; -moz-user-select: none; }
    .shopcar .shopcar-checkbox .shopcar-checkd{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../assets/images/checke.png) no-repeat; background-size: 60%; background-position: 50% ;  }
    figure{margin: 0;}
    .shopcar figure{ width: 30%; overflow: hidden; float: left;}
    .shopcar figure img{ width: 8rem; height:7.7rem; }
    .shopcar dl{ position: relative; float: left; width: 62%; height: 8rem;   margin: 0 1% 0 3%; overflow: hidden;}
    .shopcar dl dt{ font-size: 1rem; color: #333;}
    .shopcar dl dd{ font-size: 0.8rem; color: #999; margin-left:0;margin-top:0.3rem;}
    .shopcar dl .add{position: absolute; bottom: 0.3rem; left: 0; width: 40%; overflow: hidden; display: table; }
    .shopcar dl .add span{border: solid 1px #c8c8c8; padding:0.2rem 0.5rem;display:table-cell;}
    .shopcar dl .add input{border: solid 1px #c8c8c8; width:100%;margin-left: -1px; display:table-cell;font-size:1rem ; padding: 10% 0; color: #666; text-align: center;}
    .shopcar dl h3{ position: absolute; right: 3%; margin:0; font-size: 1.1rem; color: #fc605a; font-weight: normal;}
    .shopcar dl small{ position: absolute; right: 3%; bottom: 0.3rem; display: block; width: 8%;}
    .shopcar dl small img{width: 100%;}
    .van-submit-bar__price{ color:#FC605A;}
    .sub-bar button{ background: #FC605A; border:#FC605A;}
</style>
